<template>
	<view class="container">
		<!--头部start-->
		<!--<view class="header">
			<u-status-bar></u-status-bar>
			<view class="index_header">
				<text class="on">广告收益</text>
				<text>市场奖励</text>
				<text>资产明细</text>
				<image src="/static/images/img_31.png" mode="widthFix" class="h_close"></image>
			</view>
		</view>
		<u-status-bar></u-status-bar>-->
		<!--头部end-->
		
		<!--资产start-->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="means">
				<view class="num_total">
					<view class="left">已结算收益<text class="totals">{{ moneyFormat('55,074') }}</text><text class="cny">≈{{ moneyFormat('363,488.40') }} CNY</text></view>
					<view>待解冻收益<text class="totals">{{ moneyFormat('286') }}</text><text class="cny">≈{{ moneyFormat('1,887.60') }} CNY</text></view>
					<view class="eye" :class="[showPassword==true?'':'on']" :name="eyeIconName" @click="eyeIconName == 'eye-off' ? (eyeIconName = 'eye') : (eyeIconName = 'eye-off')"></view>
				</view>
				
				<view class="credit_detial means_list">
					<view class="credit_li" :id="'num'+item.id"  v-for="(item,key) in result" :key="key">
						<view class="left">200CPM / 13%<text>2022-10-09 23:21</text></view>
						<view class="right">
							<view class="num on">+26</view>
							<view class="nums"><text>ADC累计</text>55,074</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!--资产end-->
		
	</view>
</template>

<script>
	
	//加载列表数据循环元素体文件：mescroll-swiper
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default{
		mixins: [MescrollMixin],
		data(){
			return{
				eyeIconName: 'eye',
				showPassword: false,
				/*mescroll swiper S*/
				//数据列表
				result: [],
				//设置api路径
				api_url : 'demo/waterfall',
				/*mescroll swiper E*/
			}
		},
		computed: {
			// 格式化金额，等位数转换为星
			moneyFormat(e) {
				return e => {
					if (e || e == 0) {
						e = e.toString();
					}
					if (e && this.eyeIconName == 'eye-off') {
						this.showPassword = true;
						let temp = [];
						e.split('').forEach(item => {
							temp.push('*');
					});
					return temp.join('');
					} else {
						this.showPassword =false;
						parseFloat(e)
						.toFixed(2)
						.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
						return e;
					}
				};
			}
		},																																			
		methods:{
			upCallback(page) {
			    self = this;
			    //获取api数据
			    this.ajax({
			        url: self.api_url,
			        data:{
			            page: page.num,
			            pagesize: page.size
			        }
			    }).then(res => {
			        //如果res.list不是object则赋值为空对象[]
			        let result_ = (typeof(res.data.data)=='object')?res.data.data:[];
			        let result_length = result_.length;
			        //如果是第一页，则将列表数据清空
			        if(page.num == 1)
			            self.list = [];
			        //数据去重：防止最近产生的新数据导致有重复数据
			        result_ = self.$my.filterSame(result_, self.result);
			        //设置列表数据
			        self.result = self.$my.join(self.result, result_); //追加新数据
			        //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
			        //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
			        setTimeout(() => {
			            this.mescroll.endSuccess(result_length);
			        },10);
			    }).catch(()=>{
			        //联网失败, 结束加载
			        this.mescroll.endErr();
			    });
			},	
		}
	}
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("my.scss");
</style>